<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../../styles/prod.scss";
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.material-item {
  display: inline-block;
  width: 49%;
}
.dialog-name {
  margin-top: -40px;
  font-size: 14px;
  font-weight: bolder;
  margin-bottom: 20px;
}
.other-des {
  display: inline-block;
  width: 180px;
}
.dialog-item {
  margin-bottom: 20px;
  border: 1px solid rgba(223, 223, 223, 1);
  .tit {
    font-size: 14px;
    // color: white;
    background: rgba(223, 223, 223, 1);
    line-height: 32px;
    // margin-bottom: 20px;
    padding-left: 20px;
  }
  .radio {
    padding-left: 20px;
    line-height: 60px;
  }
}
.expand-column {
  width: calc(100% + 100px);
  margin-left: -50px;
  padding-top: 20px;
}
.upload-tip {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upload-btn {
  display: inline-block;
  width: 130px;
  margin-top: -20px;
  margin-bottom: -20px;
  float: right;
}
.disabled-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <custom-card title="基本信息">
      <basic-form :basicInfo="basicInfo" :ruleForm="packingData.applyGraphic" ref="basicForm" v-if="page=='apply'"></basic-form>
      <detail-form :basicInfo="basicInfo" :detail="packingData.applyGraphic" v-if="page!='apply'"></detail-form>
    </custom-card>
    <custom-card title="客供材料" class="mt-30" v-if="page=='apply'">
       <upload-list v-model="packingData.designFileList"></upload-list>
    </custom-card>
    <custom-card title="客供材料" class="mt-30" v-if="page!='apply'">
       <upload-list v-model="packingData.designFileList" :disable="true"></upload-list>
    </custom-card>
    <custom-card title="包材料件" class="mt-30">
      <!-- 按钮 -->
      <el-row type="flex" class="row-bg">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-select v-model="addMaterialInfo.materialType" placeholder="添加料件" v-if="page=='apply'">
              <el-option v-for="item in materialTypeOptions" :key="item.id" :label="language=='en'?item.labelEnUs:item.labelZhCh" :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" @click="showAddMaterail()" v-if="page=='apply'">添加料件</el-button>
            <!-- 确认和发稿只有产品设计师才能有此操作 -->
            <div class="upload-btn" v-if="checkDisabled">
              <upload-file @getFiles="uploadFiles" v-if="page!='apply'" :btn="fileBtn"></upload-file>
            </div>
            <div>
              <el-button type="success" v-if="page!='apply'&&checkType!='discard'" @click="pushOrDiscard('push')" :loading="loading">{{checkDisabled?'':'确认'}}发稿</el-button>
              <el-button type="danger" v-if="page!='apply'&&checkType!='push'" @click="pushOrDiscard('discard')" :loading="loading">{{checkDisabled?'':'确认'}}废弃</el-button>
              <el-button type="warning" v-if="!checkDisabled" :loading="loading" @click="checkDisabled=true;checkType=null">取消</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 表格下拉 -->
      <el-table :data="packingData.applyGraphicItemsList" border style="width: 100% ;margin-top:15px;" :default-expand-all="page=='apply'?false:true">
        <!-- table展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope" v-if="page!='apply'">
            <div class="disabled-cover" v-if="scope.row.status>2||!checkDisabled"></div>
            <basic-form :basicInfo="getBasicInfoTypeBox(scope.$index)" :ruleForm="scope.row.pdsPackingDesignGraphicBox" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==1&&scope.row.pdsPackingDesignGraphicBox"></basic-form>
            <basic-form :basicInfo="getBasicInfoOutBox(scope.$index)" :ruleForm="scope.row.pdsPackingDesignGraphicBox" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==2&&scope.row.pdsPackingDesignGraphicBox"></basic-form>
            <basic-form :basicInfo="basicInfoTypeLable" :ruleForm="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==3&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
            <basic-form :basicInfo="getBasicInfoTypeDes(scope.$index)" :ruleForm="scope.row.pdsPackingDesignGraphicManual" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==4&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
            <basic-form :basicInfo="basicInfoTypeColorCard" :ruleForm="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==5&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
            <basic-form :basicInfo="basicInfoTypeOther" :ruleForm="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==6&&scope.row.pdsPackingDesignGraphicOther"></basic-form>
          </template>
        </el-table-column>
        <!-- 选中列 -->
        <!-- <el-table-column type="selection" label="" prop="id">
        </el-table-column> -->
        <el-table-column label="选择" align="center" width="50px" v-if="!checkDisabled">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" :disabled="scope.row.checkedDisabled"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="50px">
          <template slot-scope="scope">
            <span v-for="item in materialTypeOptions" :key="item.id" v-if="scope.row.materialType==item.id">{{language=='en'?item.labelEnUs:item.labelZhCh}}</span>
          </template>
        </el-table-column>
        <el-table-column label="料号" align="center">
          <template slot-scope="scope">
            {{scope.row.materialNo}}
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center">
          <template slot-scope="scope">
            {{scope.row.materialName}}
          </template>
        </el-table-column>
        <el-table-column label="材质" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.materialType==1">
              <span v-if="scope.row.colorBoxSurfaceTreatment">
                {{getValue(colorBoxOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.colorBoxSurfaceTreatment)}}
              </span>
              <span v-if="scope.row.colorBoxSurfaceTreatment==0">{{scope.row.colorBoxSurfaceTreatmentDesc}}</span>
              <span>+</span>
              <span v-if="scope.row.colorBoxBondingMethod">
                {{getValue(colorBoxBindingOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.colorBoxBondingMethod)}}
              </span>
              <span v-if="scope.row.colorBoxBondingMethod==0">{{scope.row.colorBoxBondingMethodDesc}}</span>
            </div>
            <div v-if="scope.row.materialType>1&&scope.row.materialType<6">
              <span v-if="scope.row.manualMaterialCode">
                {{getValue(manualMaterialOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.manualMaterialCode)}}
              </span>
              <span v-if="scope.row.manualMaterialCode==0">{{scope.row.manualMaterialDesc}}</span>
              <span>+</span>
              <span v-if="scope.row.manualCoverPageMaterialCode==0">{{scope.row.manualCoverPageMaterialDesc}}</span>
              <span v-if="scope.row.manualCoverPageMaterialCode">
                {{getValue(manualCoverPageMaterialOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.manualCoverPageMaterialCode)}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="制作内容" align="center">
          <template slot-scope="scope">
            {{scope.row.makingContent}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160px" v-if="page=='apply'">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="materialEdit(scope.$index)">编辑</el-button>
            <el-button type="danger" size="small" @click="materialDel(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="文稿" align="center" width="140px" v-if="page!='apply'">
          <template slot-scope="scope">
            <span v-if="scope.row.fileId">
              <a :href="baseUrl + '/' + scope.row.fileUrl" class="upload-tip" target="_blank">{{scope.row.fileName}}</a>
              <el-button size="small" type="danger" @click="delFile(scope.$index)" v-if="scope.row.fileName&&scope.row.status<3&&checkDisabled">删除</el-button>
            </span>
            <upload-file @getFiles="getFiles" :uploadId="scope.$index.toString()" v-if="!scope.row.fileId&&checkDisabled" :multiple="uploadIsMultiple">上传文件</upload-file>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="80px" v-if="page!='apply'">
          <template slot-scope="scope">
            <span v-for="option in applyGraphicItemsListStatusOptions" :key="option.id" v-if="scope.row.status==option.id">{{language=='en'?option.labelEnUs:option.labelZhCh}}</span>
          </template>
        </el-table-column>
      </el-table>
    </custom-card>
    <el-dialog :visible.sync="dialogVisible" width="70%">
      <div v-for="option in materialTypeOptions " v-if="option.id==addMaterialInfo.materialType" :key="option.id" class="dialog-name">添加{{language=='en'?option.labelEnUs:option.labelZhCh}}</div>
      <el-form ref="selectMaterialForm" :rules="materailFormRules" :model="addMaterialInfo">
        <el-form-item label="料号" label-width="100px" class="material-item" required prop="materialNo">
          <el-input v-model="addMaterialInfo.materialNo" placeholder="请输入内容"></el-input>
          <!-- 筛选物料 -->
          <!-- <el-select v-model="addMaterialInfo.materialNo" filterable remote placeholder="请输入物料号" :remote-method="getMaterialByNo" >
          <el-option v-for="option in materialList" :key="option.id" :label="item.labelName ? option[item.labelName] : (lang=='en'?option.labelEnUs:option.labelZhCh)" :value="option[item.value || 'id']">
          </el-option>
        </el-select> -->
        </el-form-item>
        <el-form-item label="品名" label-width="100px" class="material-item" required prop="materialName">
          <el-input v-model="addMaterialInfo.materialName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="制作内容" label-width="100px" required prop="makingContent">
          <el-input v-model="addMaterialInfo.makingContent" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <!-- 彩盒 -->
      <div v-if="addMaterialInfo.materialType==1">
        <div class="dialog-item">
          <div class="tit">彩盒／外箱表面处理</div>
          <div class="radio">
            <el-radio-group v-model="addMaterialInfo.colorBoxSurfaceTreatment">
              <el-radio :key="index" :label="option.id" v-for="(option,index) in colorBoxOptions">{{language=='en'?option.labelEnUs:option.labelZhCh}}</el-radio>
            </el-radio-group>
            <el-input v-model="addMaterialInfo.colorBoxSurfaceTreatmentDesc" placeholder="请输入内容" class="other-des" v-if="addMaterialInfo.colorBoxSurfaceTreatment==0"></el-input>
          </div>
        </div>
        <div class="dialog-item">
          <div class="tit">彩盒／外箱接合方式</div>
          <div class="radio">
            <el-radio-group v-model="addMaterialInfo.colorBoxBondingMethod">
              <el-radio :label="option.id" v-for="option in colorBoxBindingOptions" :key="option.id">{{language=='en'?option.labelEnUs:option.labelZhCh}}</el-radio>
            </el-radio-group>
            <el-input v-model="addMaterialInfo.colorBoxBondingMethodDesc" placeholder="请输入内容" class="other-des" v-if="addMaterialInfo.colorBoxBondingMethod==0"></el-input>
          </div>
        </div>
      </div>
      <!-- 外箱／标贴／说明书／彩卡 -->
      <div v-if="addMaterialInfo.materialType>1&&addMaterialInfo.materialType<6">
        <div class="dialog-item">
          <div class="tit">标贴材质</div>
          <div class="radio">
            <el-radio-group v-model="addMaterialInfo.manualMaterialCode">
              <el-radio :label="option.id" v-for="option in manualMaterialOptions" :key="option.id">{{language=='en'?option.labelEnUs:option.labelZhCh}}</el-radio>
            </el-radio-group>
            <el-input v-model="addMaterialInfo.manualMaterialDesc" placeholder="请输入内容" class="other-des" v-if="addMaterialInfo.manualMaterialCode==0"></el-input>
          </div>
        </div>
        <div class="dialog-item">
          <div class="tit">标贴表面处理</div>
          <div class="radio">
            <el-radio-group v-model="addMaterialInfo.manualCoverPageMaterialCode">
              <el-radio :key="option.id" :label="option.id" v-for="option in manualCoverPageMaterialOptions">{{language=='en'?option.labelEnUs:option.labelZhCh}}</el-radio>
            </el-radio-group>
            <el-input v-model="addMaterialInfo.manualCoverPageMaterialDesc" placeholder="请输入内容" class="other-des" v-if="addMaterialInfo.manualCoverPageMaterialCode==0"></el-input>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmMaterial()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="pds-btm mt-30">
      <div v-if="applyId && (!packingData.applyGraphic.applyStatus||!packingData.applyGraphic.applyStatus)">
        已保存草稿
        <span class="tip">{{packingData.applyGraphic.updateTime | formatTime}}</span>
      </div>
      <div class="right">
        <el-button class="filter-item" type="warning" @click="submitForm('draft')" :loading="loading" v-if="!packingData.applyGraphic.applyStatus">保存草稿</el-button>
        <el-button class="filter-item" type="primary" @click="submitForm('save')" :loading="loading" v-if="page=='apply'">提交</el-button>
        <el-button class="filter-item" type="primary" @click="submitForm('draft')" :loading="loading" v-if="page!='apply'&&checkDisabled">保存</el-button>
      </div>
    </div>
  </div>
</template>



<script>
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm/index';
import * as api from '@/api/packing/index';
import graphicMixins from '../mixins/graphic';
import DetailForm from '@/components/BasicForm/showDetail';
import UploadList from '@/components/UploadList/index';

export default {
  name: 'user',
  components: {
    BasicForm,
    DetailForm,
    UploadList
  },
  mixins: [graphicMixins],
  data() {
    return {
      ids: null,
      checkDisabled: true,
      checkType: null,
      fileBtn: { text: '批量上传', size: 'medium' },
      uploadIsMultiple: false,
      // 添加料件基本信息弹框
      addMaterialInfo: this.materailInit()
    };
  },
  created() {
    this.getDict();
    this.getMaterialOptions();
  },
  activated() {
    this.page = this.$route.path.indexOf('require') > -1 ? 'apply' : 'design';
    if (this.page !== 'apply') {
      this.setInitBasicFormShow();
    }
  },
  computed: {
    ...mapGetters(['elements', 'language']),
    // 动态设置说明书回显elemet
    getBasicInfoTypeDes() {
      return index => {
        if (this.$refs['basicForm' + index]) {
          this.$refs['basicForm' + index].selectChange('manualColor');
        }
        return this.basicInfoTypeDes;
      };
    },
    // 动态设置彩盒回显celemet
    getBasicInfoTypeBox() {
      return index => {
        if (this.$refs['basicForm' + index]) {
          this.$refs['basicForm' + index].selectChange('colorBoxType');
        }
        return this.basicInfoTypeBox;
      };
    },
    // 动态设置外箱回显celemet
    getBasicInfoOutBox() {
      return index => {
        return this.basicInfoOutBox;
      };
    }
  },
  methods: {
    refresh() {
      if (
        this.$route.query.applyId
      ) {
        this.applyId = this.$route.query.applyId;
        this.getApplyGraphicById();
        this.clearValidate();
      } else {
        this.dataInit();
        this.clearValidate();
      }
    },
    clearValidate() {
      setTimeout(() => {
        for (const i in this.$refs) {
          if (i.indexOf('basicForm') > -1) {
            this.$refs[i] && this.$refs[i].$refs.ruleForm.clearValidate();
          } else {
            this.$refs[i] && this.$refs[i].clearValidate();
          }
        }
      });
    },
    // 批量上传
    uploadFiles(files) {
      files.map((file, fileIndex) => {
        let index = file.fileName.lastIndexOf(".")
        let fileFormat = file.fileName.substring(0, index);
        this.packingData.applyGraphicItemsList.map((item, itemIndex) => {
          if (item.status < 3) {
            if (fileFormat.indexOf(item.materialNo) > -1) {
              item.fileId = file.id;
              item.fileName = file.fileName;
              item.fileUrl = file.fileUrl;
            }
          }
        });
      });
    },
    pushOrDiscard(type) {
      if (this.loading) {
        return;
      }
      const showSelect = () => {
        this.$confirm('是否先保存当前页面修改?', '提示', {
          type: 'warning'
        }).then(res => {
          console.log('res', res)
          if (res === 'confirm') {
            this.checkType = type
            const subMitCb = () => {
              this.packingData.applyGraphicItemsList.forEach(item => {
                if (type === 'push') {
                  if (item.status === 2) {
                    item.checked = true
                    item.checkedDisabled = false
                  } else {
                    item.checked = false
                    item.checkedDisabled = true
                  }
                } else {
                  item.checked = false
                  if (item.status >= 3) {
                    item.checkedDisabled = true
                  } else {
                    item.checkedDisabled = false
                  }
                }
              })
              this.checkDisabled = false
            }
            this.submitForm('save', subMitCb)
          }
        });
      }
      if (this.checkDisabled) {
        showSelect()
      } else {
        const arr = []
        this.packingData.applyGraphicItemsList.map(item => {
          if (item.checked) {
            arr.push(item.id)
          }
        })
        if (!arr.length) {
          this.$message.error(type === 'push' ? '请选择发稿项！' : '请选择废弃项！');
          return;
        }
        this.ids = arr.join()
        const toServer = () => {
          api[type === 'push' ? 'pushGraphicItems' : 'discardGraphicItems']({ applyId: this.applyId, ids: this.ids })
            .then(res => {
              this.loading = false;
              this.checkDisabled = true
              this.checkType = null
              if (res.code === 200) {
                this.refreshCb(res);
              }
            })
            .catch(err => {
              console.log(err);
              this.loading = false;
            });
        };
        toServer()
      }
    },
    // 获取文件
    getFiles(files, uploadId) {
      this.packingData.applyGraphicItemsList[uploadId].fileId = files[0].id;
      this.packingData.applyGraphicItemsList[uploadId].fileName =
        files[0].fileName;
      this.packingData.applyGraphicItemsList[uploadId].fileUrl =
        files[0].fileUrl;
    },
    // 删除文件
    delFile(index) {
      this.packingData.applyGraphicItemsList[index].fileId = null;
      this.packingData.applyGraphicItemsList[index].fileName = null;
      this.packingData.applyGraphicItemsList[index].fileUrl = null;
      console.error('delFile', index, this.packingData.applyGraphicItemsList);
    },
    // 每次添加时初始化弹窗数据
    materailInit(type) {
      const obj = {
        materialType: type || 1, // 料件种类
        colorBoxSurfaceTreatment: 1,
        colorBoxBondingMethod: 1,
        manualMaterialCode: 1,
        manualCoverPageMaterialCode: 1
      };
      return obj;
    },
    // 添加料件弹窗
    showAddMaterail() {
      this.dialogVisible = true;
      this.addMaterialInfo = Object.assign(
        {},
        this.materailInit(this.addMaterialInfo.materialType)
      );
    },
    // 弹窗确认按钮
    confirmMaterial() {
      // if (this.addMaterialInfo.colorBoxSurfaceTreatment === 0 && !this.addMaterialInfo.colorBoxSurfaceTreatmentDesc) {
      //   this.$message.error('请填写表面处理其他方式！')
      // }
      this.$refs.selectMaterialForm.validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          if (!this.addMaterialInfo.isEdit) {
            // 非编辑包材料件时
            this.packingData.applyGraphicItemsList.push(
              Object.assign({}, this.addMaterialInfo)
            );
            this.addMaterialInfo = {};
          } else {
            this.packingData.applyGraphicItemsList[
              this.addMaterialInfo.editIndex
            ] = this.addMaterialInfo;
            const list = JSON.parse(
              JSON.stringify(this.packingData.applyGraphicItemsList)
            );
            this.$set(this.packingData, 'applyGraphicItemsList', list);
            this.addMaterialInfo = {};
          }
        }
      });
    },
    // 已添加物料列表-编辑
    materialEdit(index) {
      this.addMaterialInfo = Object.assign(
        {},
        this.packingData.applyGraphicItemsList[index]
      );
      this.addMaterialInfo.isEdit = true;
      this.addMaterialInfo.editIndex = index;
      this.dialogVisible = true;
    },
    // 已添加物料列表-delete
    materialDel(index) {
      this.packingData.applyGraphicItemsList.splice(index, 1);
    },
    async submitForm(type, subMitCb) {
      // 验证成功提交接口前数据整理
      const changeDataToUpdate = () => {
        this.updateData = JSON.parse(JSON.stringify(this.packingData));
        this.updateData.applyGraphicItemsList.map(item => {
          if (item.pdsPackingDesignGraphicBox) {
            item.pdsPackingDesignGraphicBox.boxSpec = item.pdsPackingDesignGraphicBox.boxSpec.join();
          }
        });
      };
      changeDataToUpdate();
      const basicFormCheck = this.$refs.basicForm
        ? await this.$refs.basicForm.submitForm()
        : true;
      if (!basicFormCheck) {
        this.$message.error('请填写完整基本信息');
        return;
      }
      const updateToServer = () => {
        if (this.loading) return;
        this.loading = true;
        // 成功提交数据后的处理
        const submitCallback = res => {
          this.loading = false;
          if (res.code === 200) {
            if (type === 'save') {
              if (subMitCb) {
                subMitCb()
                this.refreshCb(res);
                return
              } else {
                this.$store.dispatch('delActiveViews');
              }
            } else {
              this.refreshCb(res);
            }
            this.$message.success(
              (type === 'save' ? '提交' : '保存草稿') + '成功'
            );
          } else {
            this.$message.error(res.message);
          }
        };
        if (this.page === 'apply') {
          if (type === 'draft') {
            api
              .graphicApplySaveDraft(this.updateData)
              .then(res => {
                submitCallback(res);
              })
              .catch(err => {
                console.log(err);
                this.loading = false;
              });
          } else {
            api
              .graphicApplySubmit(this.updateData)
              .then(res => {
                submitCallback(res);
              })
              .catch(err => {
                console.log(err);
                this.loading = false;
              });
          }
        } else {
          let basicFormArrayCheck;
          this.packingData.applyGraphicItemsList.map(async(item, index) => {
            item.basicFormCheck = await this.$refs[
              'basicForm' + index
            ].submitForm();
            if (!item.basicFormCheck) {
              basicFormArrayCheck = false;
              this.$message.error('请填写完整已选料件相关信息');
            }
          });
          // if (!basicFormArrayCheck) {
          //   return;
          // }
          api
            .updateDesignGrahpicItems(this.updateData)
            .then(res => {
              submitCallback(res);
            })
            .catch(err => {
              console.log(err);
              this.loading = false;
            });
        }
      };
      updateToServer();
    }
  }
};
</script>
